<template>
  <div class="mod-home">
    <el-row :gutter="15">
      <el-col :span="8">
        <div class="total-home total-home-1">
          <p class="title">今日新增</p>
          <p class="total">{{cardTotal.today}}</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="total-home total-home-2">
          <p class="title">昨日新增</p>
          <p class="total">{{cardTotal.yesterday}}</p>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="total-home total-home-3">
          <p class="title">总会员数</p>
          <p class="total">{{cardTotal.totalCount}}</p>
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <div class="total-home total-home-4">
          <p class="title">昨日新增</p>
          <p class="total">20</p>
        </div>
      </el-col> -->
    </el-row>
    <el-row :gutter="15"
            style="margin-top: 50px">
      <el-col :span="24">
        <div class="chart">
          <div id="J_chartLineBox"
               class="chart-box"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  data () {
    return {
      chartLine: null,
      cardTotal: ''
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    // 折线图
    initChartLine () {
      var option = {
        'title': {
          'text': ''
        },
        'tooltip': {
          'trigger': 'axis'
        },
        'legend': {
          'data': this.cardTotal.type
        },
        'grid': {
          'left': '3%',
          'right': '4%',
          'bottom': '3%',
          'containLabel': true
        },
        'toolbox': {
          'feature': {
            'saveAsImage': {}
          }
        },
        'xAxis': {
          'type': 'category',
          'boundaryGap': false,
          'data': this.cardTotal.date
        },
        'yAxis': {
          'type': 'value'
        },
        'series': this.cardTotal.total
      }
      this.chartLine = echarts.init(document.getElementById('J_chartLineBox'), 'vintage')
      this.chartLine.setOption(option)
      window.addEventListener('resize', () => {
        this.chartLine.resize()
      })
    },
    loadData () {
      this.$http({
        url: this.$http.adornUrl('/member/card/total'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // console.log(data)
          this.cardTotal = data.data
          console.log(this.cardTotal)
          this.initChartLine()
        }
      })
    }
  }
}
</script>

<style scoped>
div >>> .el-card {
  border: none;
  background-color: #f1f4f5 !important;
}
div >>> .el-card.is-always-shadow {
  --webkit-box-shadow: none;
  box-shadow: none;
}
.mod-home {
  line-height: 1.4;
}
.total-home {
  height: 150px;
  padding: 25px 20px 25px 20px;
}
.total-home p {
  margin: 0;
  padding: 0;
  color: #fff;
}
.total-home p.total {
  font-size: 50px;
  padding-left: 10px;
}
.total-home p.title {
  font-size: 20px;
}

.total-home-1 {
  background: #2aa8e4;
}
.total-home-2 {
  background: #f54e50;
}
.total-home-3 {
  background: #fdcb28;
}
.total-home-4 {
  background: #38b782;
}
.chart-box {
  min-height: 400px;
}
</style>

